<style>
    #single-view .bg {
        width: 100vw;
        height: 100vh;
        max-width: 750px;
        min-width: 320px;
        position: fixed;
        top: 0;
        /* left: 0; */
        background: rgba(0, 0, 0, 0.5);
    }

    #single-view .city-wrap {
        background: #fff;
        width: 100vw;
        max-width: 750px;
        min-width: 320px;
        position: fixed;
        bottom: 0;
        /* left: 0; */
    }

    #single-view .city-wrap .li {
        line-height: 25px;
        border-bottom: 1px solid #eee;
        padding: 10px;
        font-size: 14px;
        text-align: center;
        align-items: center;
        justify-content: center;
    }

    #single-view .city-wrap ul .li:last-child {
        border-bottom: 0;
    }

    #single-view .city-wrap .left {
        /* width: 40vw; */
        overflow-y: auto;
        height: 50vh;
        /* border-right: 1px solid #eee; */
    }

    #single-view .city-wrap .right ul {
        width: 60vw;
        overflow-y: auto;
        height: 50vh;
    }

    #single-view .city-wrap ul .li.active {
        color: #673AB7;
        font-weight: bold;
    }

    /* 按钮 */
    #single-view .btn-wrap {
        border-bottom: 1px solid #eee;
    }

    #single-view .btn-wrap .btn {
        color: #673AB7;
        font-size: 14px;
    }

    /* 选中的城市 */
    #single-view .select-wrap .tag {
        border: 1px solid;
        color: #673AB7;
        font-size: 12px;
        padding: 2px 10px;
        border-radius: 5px;
        margin: 5px;
    }
</style>
<div class="wrap" id="single-view">
    <div class="bg" onclick="closeModalFrm()"></div>
    <div class="city-wrap">
        <!-- <div class="btn-wrap flex-bt new-padding-10">
                <button class="btn" onclick="closeModalFrm()">取消</button>
                <button class="btn" onclick="frmSubmit()">确定</button>
            </div> -->
        <ul class="left">
            <li class="li" :class="{'active': index == 0}" v-for="(m, index) in ffList"
                @click="selectPro(index, $event)">{{m.name}}</li>
        </ul>
    </div>
</div>
<script>
    var singleView = new Vue({
        el: '#single-view',
        data: {
            ffList: []
        },
        methods: {
            selectPro: function (index, event) {
                var _this = this;
                var e = event.currentTarget;
                $(e).addClass('active').siblings().removeClass('active');
                var text = $(e).text();
                getUserFilter(ziduanType, text);
            }
        }
    })

    singleView.ffList = singleArr;
</script>